<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">页面一</button>
    <button class="btn2">页面二</button>
    <button class="btn3">页面三</button>
    <div class="page"></div>
    <script>
        var btn1 = document.getElementsByClassName("btn1")[0];
        var btn2 = document.getElementsByClassName("btn2")[0];
        var btn3 = document.getElementsByClassName("btn3")[0];
        var page = document.getElementsByClassName("page")[0];
        // 点击页面获取哈希值 做对应的页面跳转
        btn1.onclick = function () {
            window.location.hash = "#page1";
            renderPage();
        }
        btn2.onclick = function () {
            window.location.hash = "#page2";
            renderPage();
        }
        btn3.onclick = function () {
            window.location.hash = "#page3";
            renderPage();
        }
        
        // 触发404页面  ，404是加载的时候就要显示
        renderPage();
        // 通过判断哈希值来区分页面
        function renderPage() {
            var hashNum = window.location.hash;
            switch (hashNum) {
                case '#page1':
                    // 分别加载某一个页面
                    page.innerHTML = "页面一";
                    break;
                case '#page2':
                    page.innerHTML = "页面二";
                    break;
                case '#page3':
                    page.innerHTML = "页面三";
                    break;
                default:
                    page.innerHTML = "404页面";
                    break;
            }
        }
// 如果要通过哈希来判断路由 ，必须执行  switch 这块的代码；刚加载页面的时候有没有执行  switch判断 来区分路由？？
// 初次加载的时候要执行 判断里的内容  判断里的内容又被封装了，所以要调用一次来判断hash值 然后加载对应的页面；




    </script>

</body>

</html>